<template>
    <div>
        <section class="bus-container" v-if="busList.length" v-load-more="loaderMore" type="1">
            <section class="bus-box" @click="toShop(bus.id)" v-for="bus in busList" :key="bus.id">
                <section class="box-media-wrap">
                    <figure>
                        <div class="box-media">
                            <img :src="getImgPath(bus.image_path)" alt="">
                        </div>
                        <div class="box-new" v-if="bus.is_new">
                            <span>新店</span>
                        </div>
                    </figure>
                </section>
                <hgroup class="box-dec">
                    <div class="dec_title">
                        <h2>{{bus.name}}</h2>
                        <div class="pill">
                            <i>票</i>
                        </div>
                    </div>
                    <div class="dec_del">
                        <div class="rating-wrapper">
                            <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <div class="rating-1">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                        <span class="rate-num">{{bus.rating}}</span>
                        <span class="">月售{{bus.recent_order_num}}单</span>
                    </div>
                    <div class="dec_line">
                        <div class="monney">
                            <span>¥{{bus.float_minimum_order_amount}}起送</span>
                            <span>配送费¥{{bus.float_delivery_fee}}</span>
                            <span>{{bus.average_cost}}</span>
                        </div>
                        <div class="time">
                            <span>{{bus.distance}}m</span>
                            <span>{{bus.order_lead_time}}分钟</span>
                        </div>
                    </div>
                </hgroup>
            </section>
    
        </section>
        <p v-else class="empty-data">没有更多了</p>
        <aside class="return_top" @click="backTop">
            <svg class="back_top_svg">
        				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
        			</svg>
        </aside>
        <footer class="loader" v-show="preventRepeatReuqest">正在载入更多商家...</footer>
        <transition name="loading">
            <loading v-show="showLoading"></loading>
        </transition>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        mapState,
        mapActions,
        mapGetters,
        mapMutations
    } from 'vuex'
    import {
        loadMore
    } from './../assets/js/mixin'
    import loading from './loading'
    export default {
        data() {
            return {
                hasGetData: false,
                offset: 0,
                limit: 20,
                extras: 'activities',
                terminal: 'h5',
                busList: [], //店铺列表数据
                preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
                showLoading: true, //显示加载动画
                showBackStatus: false, //显示返回顶部按钮
            }
        },
        components: {
            loading
        },
        computed: {
            ...mapGetters([
                'latitude', 'longitude'
            ]),
        },
        mounted() {
            this.initData()
        },
        props: ['geohash'],
        mixins: [loadMore],
        methods: {
    
            async initData() {
                // 推荐商家
                await this.$fetch('GET', '/shopping/restaurants', {
                    'latitude': this.latitude,
                    'longitude': this.longitude,
                    'offset': this.offset,
                    'limit': this.limit,
                    'extras[]': this.extras,
                    'terminal': this.terminal,
                }).then(res => {
                    this.busList = res;
                });
            },
            //到达底部加载更多数据
            async loaderMore() {
                //防止重复请求
                if (this.preventRepeatReuqest) {
                    return
                }
                this.showLoading = true;
                this.preventRepeatReuqest = true;
    
                //数据的定位加20位
                this.offset += 20;
                // 推荐商家
                await this.$fetch('GET', '/shopping/restaurants', {
                    'latitude': this.latitude,
                    'longitude': this.longitude,
                    'offset': this.offset,
                    'limit': this.limit,
                    'extras[]': this.extras,
                    'terminal': this.terminal,
                }).then(res => {
                    this.busList = this.busList.concat(res);
                    //当获取数据小于20，说明没有更多数据，不需要再次请求数据
                    if (res.length < 20) {
                        return
                    }
                });
                this.preventRepeatReuqest = false;
            },
            toShop(id) {
                this.$router.push({
                    path: '/shop',
                    query: {
                        id: id,
                        geohash: this.geohash
                    }
                });
            },
            backTop() {
    
            },
            getImgPath(path) {
                let suffix;
                if (!path) {
                    return 'http://test.fe.ptdev.cn/elm/elmlogo.jpeg'
                }
                if (path.indexOf('jpeg') !== -1) {
                    suffix = '.jpeg'
                } else {
                    suffix = '.png'
                }
                let url = '/' + path.substr(0, 1) + '/' + path.substr(1, 2) + '/' + path.substr(3) + suffix;
                return 'https://fuss10.elemecdn.com' + url
            },
        },
        beforeDestroy() {
    
        }
    }
</script>

<style lang="stylus" scoped>
    @import '../assets/stylus/mixin';
    .bus-container
        background-color: #fff;
    .bus-box
        display:flex;
        justify-content: space-between
        position: relative;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        color: #666;
        list-style: none;
        font-size: .293333rem;
        .box-media-wrap
            position: relative;
            padding: .4rem .26rem;
            .box-new
                color: #666;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 50;
                width: .853333rem;
                height: .853333rem;
                background-image: -webkit-linear-gradient(315deg,#26ce61,#26ce61 50%,transparent 0);
                background-image: linear-gradient(135deg,#26ce61,#26ce61 50%,transparent 0);
                font-size: .24rem;
                span
                    position: absolute;
                    top: .133333rem;
                    left: .026667rem;
                    display: block;
                    color: #fff;
                    font-weight: 700;
                    transform: rotate(-45deg);
            .box-media
                position: relative;
                width: 1.6rem;
                height: 1.6rem;
                img 
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 4px;
        .box-dec
            padding: .4rem .26rem .4rem 0;
            display:flex;
            flex-grow: 1;
            flex-direction: column;
            justify-content: space-between;
            .dec_title
                display:flex;
                align-items: center;
                justify-content: space-between;
                h2 
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                    max-width: 5rem;
                    color: #333;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: 700;
                    font-size: .4rem;
                    line-height: .42rem;
                    &:before
                        margin-right: .133333rem;
                        padding: 0 .066667rem;
                        height: .4rem;
                        border-radius: .053333rem;
                        background-color: #ffd930;
                        color: #52250a;
                        content: "品牌";
                        vertical-align: top;
                        text-align: center;
                        font-weight: 700;
                        font-size: .3rem;
                        line-height: .4rem;
                .pill
                    justify-content: flex-end;
                    display:flex;
                    line-height: .426667rem;
                    font-size: .266667rem;
                    display:flex;
                    i 
                        font-size: .266667rem;
                        font-style: normal;
                        line-height: 1;
                        height: .3rem;
                        display: inline-block;
                        box-sizing: border-box;
                        text-align: center;
                        border: 1px solid;
                        border-radius: .04rem;


            .dec_del
                display:flex;
                align-items:center;
                margin-top: .2rem;
                // justify-content: space-between;
                .rating-wrapper
                    position: relative;
                    overflow: hidden;
                    display: inline-block;
                    vertical-align: middle;
                .rating
                    display:flex;
                    span
                        display: block;
                        margin: 0 1px;
                        width: .266667rem;
                        height: .266667rem;

                .rating-1
                    position:absolute;
                    top: 0;
                    left: 0;
                    overflow: hidden;
                    width: 100%;
                    display:flex;
                    span
                        display: block;
                        margin: 0 1px;
                        width: .266667rem;
                        height: .266667rem;
                .rate-num
                    margin: 0 .106667rem;
                    color: #ff6000;
            .dec_line
                margin-top: .226667rem;
                line-height: .32rem;
                display:flex;
                justify-content: space-between;
                align-items:center;
                .monney
                    display:flex;
                    align-content: center;
                    span
                        &:nth-of-type(2)
                            max-width: 2.666667rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        &+span
                            &:before
                                margin: 0 .08rem;
                                color: #ddd;
                                content: "/";
                        
                .time
                    display:flex;
                    align-content: center;
                    span
                        &:nth-of-type(1)
                            color: #999;
                        &:nth-of-type(2)
                            color: #2395ff;
                            &:before
                                margin: 0 .08rem;
                                color: #ddd;
                                content: "/";

	    .loader,
        .empty-data
            color: #999;
            text-align: center;
            font: .4rem/3 Microsoft YaHei;
</style>
